<template>
  <div class="container">
    <!-- <h2>设备管理</h2> -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline" size="medium">
        <el-form-item label="设备编号：">
          <el-input v-model="queryObj.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="searchBtn" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="btns">
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="left" @click="openAdd">新建</el-button>
        <el-button type="primary" class="right" @click="openLargeStraDialog">批量操作</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        highlight-current-row
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: 'rgb(243, 246, 251)',
          fontWeight: 500,
          padding: '9px 0'
        }"
        @select="largeStraMsg"
      >
        <el-table-column
          type="selection"
          width="100"
        />
        <el-table-column
          label="序号"
          width="80"
          prop="id"
          type="index"
        />
        <el-table-column
          label="设备编号"
          width="300"
          prop="innerCode"
        />
        <el-table-column
          label="设备型号"
          width="300"
          prop="type.name"
        />
        <el-table-column
          label="详细地址"
          width="200"
          show-overflow-tooltip
          prop="node.name"
        />
        <el-table-column
          label="合作商"
          width="300"
          prop="ownerName"
        />
        <el-table-column
          label="设备状态"
          width="200"
          prop="vmStatus"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus?row.vmStatus===1?'运营': '撤机' : '未投放' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template #default="{row}">
            <el-button type="text" @click="open(row.vmType, row.innerCode, row.businessId)">货道</el-button>
            <el-button type="text" @click="openStrategyDialog(row.innerCode)">策略</el-button>
            <el-button type="text" @click="openEditDialog(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 分页区域 -->
      <el-pagination
        :current-page="queryObj.pageIndex"
        :page-size="queryObj.pageSize"
        popper-class="selectPagesize"
        layout="slot, prev,  next"
        background
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template>
          <span class="pagnation">共{{ totalCount }}条记录 第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        </template>
      </el-pagination>
      <!-- 分页区域 -->

      <!-- 货道弹窗部分 -->
      <!-- 货道设置弹窗 -->
      <el-dialog
        title="货道设置"
        :visible="goodsDialog"
        width="940px"
        @close="closeGoods"
      >
        <i v-show="goodsInfo.channelMaxCapacity !== 5" ref="prev" class="el-icon-arrow-left arrow-left disabled" @click="prev" />
        <i v-show="goodsInfo.channelMaxCapacity !== 5" ref="next" class="el-icon-arrow-right arrow-right" @click="next" />
        <div class="body">
          <div class="channel-basic">
            <div class="good_left">
              <el-row>
                <el-col :span="8"><span>货道行数：{{ goodsInfo.vmRow }}</span></el-col>
                <el-col :span="8"><span>货道列数：{{ goodsInfo.vmCol }}</span></el-col>
                <el-col :span="8"><span>货道容量（个）：{{ goodsInfo.channelMaxCapacity }}</span></el-col>
              </el-row>
            </div>
            <div class="good_right">
              <el-button
                type="primary"
                size="small"
                style="background-color: #5f84ff;width: 80px"
                @click="smartGoods"
              >智能排货</el-button>
            </div>
          </div>
          <div ref="list" class="channel-dialog-wrapper">
            <div :class="{list: true, next: state === 2, prev: state === 1, lists: goodsInfo.channelMaxCapacity === 5 }">
              <div v-for="(item,index) in channelInfo" :key="item.channelId" class="main">
                <div class="code">{{ item.channelCode }}</div>
                <div class="sku">
                  <img v-if="item.sku" :src="item.sku && item.sku.skuImage" alt="">
                  <img v-else src="@/assets/暂无商品.png" alt="">
                  <div v-if="item.sku" class="name">{{ item.sku && item.sku.skuName }}</div>
                  <div v-else class="name">暂无商品</div>
                </div>
                <div class="list_footer">
                  <el-button type="text" class="add" @click="addSku(index)">添加</el-button>
                  <el-button type="text" :class="{del: true, dis: !item.sku}" :disabled="!item.sku">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="footer" />
          <el-button type="danger" class="goods" @click="submitGoods">确认</el-button>
        </template>
      </el-dialog>
      <!-- 货道弹窗部分 -->

      <!-- 智能排货 -->
      <!-- 智能排货 -->
      <el-dialog
        class="smart_dialog"
        title="智能排货"
        :visible="smartGoodsDialog"
        width="850px"
        @close="closeSmartGoods"
      >
        <div class="smart_body">
          <div ref="list" class="smart_channel-dialog-wrapper">
            <div class="smart_tip">该区域属于{{ goodsCircle }}商圈适合销售一下商品：</div>
            <div class="smart_list">
              <div v-for="item in businessList" :key="item.skuId" class="smart_main">
                <div class="smart_sku">
                  <img class="pic" :src="item.image" alt="">
                  <!-- < img v-else src="@/assets/暂无商品.png" alt=""> -->
                  <div class="name">{{ item.skuName }}</div>
                  <!-- <div v-else class="name">暂无商品</div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="smart_footer" />
          <el-button type="danger" class="goods" @click="listener">采纳建议</el-button>
        </template>
      </el-dialog>
      <!-- 智能排货 -->

      <!-- 添加商品 -->
      <el-dialog
        class="smart_dialog"
        title="智能排货"
        :visible="addSkuDialog"
        width="850px"
        @close="closeAddSku"
      >
        <i ref="add_prev" class="el-icon-arrow-left add_arrow-left disabled" @click="addPrev" />
        <i ref="add_next" class="el-icon-arrow-right add_arrow-right " @click="addNext" />
        <div class="smart_body">
          <div ref="list" class="smart_channel-dialog-wrapper">
            <div class="sku_input">
              <span>商品名称：</span>
              <el-input v-model="skuObj.skuName" style="width:300px" />
              <el-button
                style="margin-left: 20px; background-color: #5373e0;border: none"
                type="primary"
                icon="el-icon-search"
              >查询</el-button>
            </div>
            <div class="smart_list">
              <div v-for="item in skuList" :key="item.skuId" class="smart_main" @click="checked(item.skuId)">
                <div class="smart_sku">
                  <img :ref="`selected${item.skuId}`" src="@/assets/选中.png" style="display: none" alt="" class="pic selected">
                  <img :src="item.skuImage" alt="" class="pic">
                  <div class="name">{{ item.skuName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="smart_footer" />
          <el-button type="danger" :class="{goods: true, not_selected: currentSkuId === 0}" :disabled="currentSkuId === 0" @click="addSkuFn">确定</el-button>
        </template>
      </el-dialog>

      <!-- 策略管理弹窗部分 -->
      <el-dialog
        class="strategyDialog"
        title="策略管理"
        :visible.sync="strategyDialog"
        width="45%"
      >
        <!-- 信息 -->
        <el-form ref="form" class="strategyForm" :model="strategyForm" label-width="140px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="机器编号：">
                <span>{{ strategyForm.innerCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略名称：">
                <span>{{ strategyForm.policyName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="策略方案：">
                <span>{{ strategyForm.discount }}%</span>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <!-- 信息 -->
        <template #footer>
          <div class="footer" style="text-align: center">
            <el-button type="danger" style="color:#655b56;border:none" plain @click="strategyDialog = false">取消策略</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 策略管理弹窗部分 -->

      <!-- 修改弹窗部分 -->
      <el-dialog
        title="修改设备"
        :visible.sync="editDialog"
        width="46%"
        class="editDialog"
      >
        <el-form ref="form" :model="editForm" label-width="140px">
          <el-form-item label="机器编号：">
            <div>{{ editForm.innerCode }}</div>
          </el-form-item>
          <el-form-item label="供货时间：">
            <div>{{ editForm.lastSupplyTime }}</div>
          </el-form-item>
          <el-form-item label="设备类型：">
            <div>{{ editForm.type.name }}</div>
          </el-form-item>
          <el-form-item label="设备容量：">
            <div>{{ editForm.type.channelMaxCapacity }}</div>
          </el-form-item>
          <el-form-item label="设备点位：">
            <el-select :value="editForm.node.id" @change="changeNode">
              <el-option
                v-for="item in editDialogOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="合作商：">
            <div>{{ editForm.ownerName }}</div>
          </el-form-item>
          <el-form-item label="所属区域：">
            <div>{{ editForm.region.name }}</div>
          </el-form-item>
          <el-form-item label="设备地址：">
            <div>{{ editForm.node.addr }}</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="editDialog-footer">
            <el-button @click="closeEdit">取 消</el-button>
            <el-button type="primary" @click="submitEdit">确 定</el-button>
          </div>

        </template>
      </el-dialog>
      <!-- 修改弹窗部分 -->

      <!-- 新增设备弹窗 -->
      <el-dialog
        title="新增设备"
        :visible.sync="addDialog"
        width="45%"
      >
        <el-form ref="addForm" :model="addForm" label-width="140px" :rules="addRules">
          <el-form-item label="设备编号：">
            <div>系统自动生成</div>
          </el-form-item>
          <el-form-item label="选择型号：" prop="vmType">
            <el-select v-model="addForm.vmType">
              <el-option
                v-for="item in vmTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择点位：" prop="nodeId">
            <el-select v-model="addForm.nodeId">
              <el-option
                v-for="item in nodeIdOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增设备弹窗 -->

      <!-- 批量策略管理弹窗部分 -->
      <el-dialog
        title="提示"
        :visible.sync="largeStraDialog"
        width="40%"
      >
        <el-form ref="largestraForm" label-width="140px" :rules="addRules">
          <el-form-item label="选择策略：">
            <el-select v-model="selectedStra">
              <el-option
                v-for="item in largestraOptions"
                :key="item.policyId"
                :label="item.policyName"
                :value="item.policyId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="largeStraDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitLargeStra">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 批量策略管理弹窗部分 -->

    </div>
  </div>
</template>

<script>
import { list,
  strategyList,
  equipmentNode,
  editEquipmentNode,
  addEquipment,
  largeStrategyList,
  editLargeStrategy,
  aisleList,
  aisleChooseList,
  getGoodsDetail,
  getChannelDetail,
  getTopGoods,
  getGoodsCircleList,
  getSkuList } from '@/api/equipments/equipment'
import { list as typeList } from '@/api/equipments/type'

export default {
  name: 'Dikedeguanli',

  data () {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      totalCount: null,
      totalPage: '',
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        status: null,
        innerCode: null
      },
      strategyDialog: false, // 策略管理弹窗开关

      strategyForm: {
        innerCode: '010006',
        policyName: '0.1折优惠',
        discount: 1
      },
      editDialog: false, // 修改弹窗开关
      editForm: {
        innerCode: '',
        lastSupplyTime: '',
        type: {
          name: '',
          channelMaxCapacity: ''
        },
        ownerName: '',
        region: {
          name: ''
        },
        node: {
          addr: '',
          name: ''
        }
      },
      editDialogOption: [], // 修改弹窗下拉框选项列表
      editQuery: {
        id: '', // 售货机id
        nodeId: ''// 点位id
      },
      addDialog: false, // 新增弹窗
      addForm: {
        vmType: '', // 类型
        nodeId: '', // 点位
        createUserId: '1'
      },
      vmTypeOptions: [],
      nodeIdOptions: [],
      addRules: {
        vmType: [
          { required: true, message: '请选择', trigger: 'change' }
        ], // 类型
        nodeId: [
          { required: true, message: '请选择', trigger: 'change' }
        ] // 点位
      },
      largeStraDialog: false, // 批量管理弹窗部分
      largestraOptions: [], // 渲染批量管理下拉框
      selectedStra: '',
      isSelected: null, // 判断有没有选择复选框
      outerVisible: false,
      innerVisible: false,
      flag: false, // 控制货道弹窗左右滑动
      outerDialogMsg: [],
      innerTitle: '选择商品',
      // 货道内层弹窗的渲染请求体
      innerQueryObj: {
        pageIndex: 1,
        pageSize: 10
      },
      chooseProList: {},
      // //////////////////////
      channelInfo: [],
      goodsInfo: {},
      state: 0,
      skuObj: {
        pageIndex: 1,
        pageSize: 10,
        skuName: null
      },
      currentIndex: '',
      currentSkuId: 0,
      skuList: [],
      businessList: [],
      goodsCircle: '',
      businessId: 0,
      addSkuDialog: false,
      smartGoodsDialog: false, // 智能排货弹窗
      goodsDialog: false // 货道设置开关

    }
  },
  // 监听选中的商品
  watch: {
    currentSkuId (value, oldValue) {
      this.$refs[`selected${value}`] && this.$refs[`selected${value}`][0] && (this.$refs[`selected${value}`][0].style.display = 'block')
      this.$refs[`selected${oldValue}`] && this.$refs[`selected${oldValue}`][0] && (this.$refs[`selected${oldValue}`][0].style.display = 'none')
    }
  },

  async created () {
    this.initTable()
  },

  methods: {
    async initTable () {
      const data = await list(this.queryObj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      // console.log(data)
    },
    // 修改表格头部颜色
    // setHeadColor({ rowIndex, columnIndex }) {
    //   if (rowIndex === 0) {
    //     return 'background:#f3f6fb'
    //   }
    // },
    // 当每页条数数据改变时触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // 修改本地传参发请求的每页条数数据，以便发请求
      this.queryObj.pageSize = val
      // 改变每页数据条数时，将当前页初始化为1，在请求数据
      this.queryObj.pageIndex = 1
      this.initTable()
    },
    // 当当前页页数改变时触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // 修改本地传参发请求的当前页数据，以便发请求
      this.queryObj.pageIndex = val
      this.initTable()
    },
    // 打开策略弹窗
    async openStrategyDialog (id) {
      const data = await strategyList(id)
      console.log(data)
      this.strategyForm = { ...data }
      this.strategyDialog = true
    },
    // 打开修改弹窗
    async openEditDialog (row) {
      this.editForm = { ...row }
      console.log(row)
      const { currentPageRecords } = await equipmentNode()
      const arr = currentPageRecords.map(item => {
        return { name: item.name, id: item.id }
      })
      this.editDialogOption = arr
      console.log(arr)
      this.editQuery.id = row.id
      this.editDialog = true
    },
    // 修改点位下拉框选项触发
    changeNode (value) {
      // console.log(value)
      this.editForm.node.id = value
      this.editQuery.nodeId = value
    },
    // 提交修改点位
    async submitEdit () {
      try {
        await editEquipmentNode(this.editQuery)
        this.$message.success('修改成功')
        this.initTable()
        this.editDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭修改弹窗，还原下拉框值
    closeEdit () {
      this.initTable()
      this.editDialog = false
    },
    // 搜素功能
    search () {
      this.initTable()
    },
    // 打开新增弹窗
    async openAdd () {
      const { currentPageRecords } = await equipmentNode()
      // console.log(currentPageRecords)
      const arr = currentPageRecords.map(item => {
        return { name: item.name, id: item.id }
      })
      this.nodeIdOptions = arr

      const { currentPageRecords: type } = await typeList()
      const arr1 = type.map(item => {
        return { name: item.name, id: item.typeId }
      })
      // console.log(arr1)
      this.vmTypeOptions = arr1

      this.addDialog = true
    },
    // 提交新增
    async addSubmit () {
      try {
        await addEquipment(this.addForm)
        this.$message.success('新增成功')
        this.initTable()
        this.addDialog = false
      } catch (error) {
        console.log(error)
      }
      this.$refs.addForm.resetFields()
    },
    // 表格多选框选择时的回调
    largeStraMsg (selection, row) {
      console.log(selection)
      // console.log(row)
      this.isSelected = selection
    },
    // 打开批量管理弹窗
    async openLargeStraDialog () {
      if (!this.isSelected) {
        this.$message.warning('请勾选售货机')
      } else {
        const data = await largeStrategyList()
        console.log(data)
        this.largestraOptions = data

        this.largeStraDialog = true
      }
    },
    // 提交批量修改策略待写
    async submitLargeStra () {
      const data = this.largestraOptions.find(item => {
        return item.policyId === this.selectedStra
      })
      // console.log(data)
      const res = await editLargeStrategy(data)
      console.log(res)
      this.$message.success('批量修改成功')
      this.largeStraDialog = false
      this.initTable()

      // this.$message.warning('演示系统不支持此操作')
    },
    // 打开外层货道弹窗
    async openouter (row) {
      const data = await aisleList(row.innerCode)
      console.log(data)
      this.outerDialogMsg = data
      this.outerVisible = true
    },
    // 打开内层货道弹窗选择商品
    async openInnerDialog () {
      const data = await aisleChooseList(this.innerQueryObj)
      console.log(data)
      this.chooseProList = data
      this.innerVisible = true
    },
    toNextPage () {
      this.innerQueryObj.pageIndex++
    },
    toPrevPage () {
      this.innerQueryObj.pageIndex--
    },
    replacePro (item) {
      console.log(item)
    },
    // ///////////////////
    // 获取商品列表
    async addSku (index) {
      this.currentIndex = index
      const res = await getSkuList(this.skuObj)
      this.skuList = res.currentPageRecords
      this.totalPage = res.totalPage
      // console.log(res)
      this.addSkuDialog = true
    },
    // 选中商品
    checked (id) {
      this.currentSkuId = id
    },
    // 添加商品
    addSkuFn () {
      const res = this.skuList.find(item => item.skuId === this.currentSkuId)
      this.channelInfo[this.currentIndex].sku.skuName = res.skuName
      this.channelInfo[this.currentIndex].sku.skuImage = res.skuImage
      this.addSkuDialog = false
    },
    // 确定商品
    submitGoods () {
      this.$message.error('演示系统不支持此操作')
    },
    // 关闭添加商品弹窗
    closeAddSku () {
      this.addSkuDialog = false
      this.currentSkuId = 0
    },
    // 添加商品右箭头
    addNext () {
      this.skuObj.pageIndex += 1
      if (this.skuObj.pageIndex >= this.totalPage) {
        this.$refs.add_next.classList.add('disabled')
      }
      if (this.skuObj.pageIndex > 1) {
        this.$refs.add_prev.classList.remove('disabled')
      }
      this.skuObj.pageIndex <= this.totalPage && this.addSku()
    },
    // 添加商品左箭头
    addPrev () {
      if (this.skuObj.pageIndex > 1) {
        this.skuObj.pageIndex -= 1
        if (this.skuObj.pageIndex === 1) {
          this.$refs.add_prev.classList.add('disabled')
        } else if (this.skuObj.pageIndex <= this.totalPage) {
          this.$refs.add_next.classList.remove('disabled')
        }
        this.addSku()
      } else {
        this.skuObj.pageIndex = 1
      }
    },
    // 智能排货按钮
    async smartGoods () {
      const res = await getTopGoods(this.businessId)
      this.goodsCircle = await getGoodsCircleList(this.businessId)
      this.businessList = res
      console.log(res)
      this.smartGoodsDialog = true
    },
    // 货道弹窗
    async open (id, code, businessId) {
      this.goodsDialog = true
      this.businessId = businessId
      const res = await getGoodsDetail(id)
      const data = await getChannelDetail(code)
      console.log(data)
      this.channelInfo = [...data]
      this.goodsInfo = { ...res }
    },
    // 采纳意见按钮
    listener () {
      for (let i = 0; i < 10; i++) {
        this.channelInfo[i].sku.skuName = this.businessList[i].skuName
        this.channelInfo[i].sku.skuImage = this.businessList[i].image
      }
      this.smartGoodsDialog = false
      // console.log(this.channelInfo)
    },
    // 货道弹窗右箭头
    prev () {
      this.state = 1
      this.$refs.prev.classList.add('disabled')
      this.$refs.next.classList.remove('disabled')
    },
    // 货道弹窗左箭头
    next () {
      this.state = 2
      this.$refs.next.classList.add('disabled')
      this.$refs.prev.classList.remove('disabled')
    },
    // 关闭商品按钮
    closeGoods () {
      // this.initTable()
      this.goodsDialog = false
      this.state = 1
      this.$refs.prev.classList.add('disabled')
      this.$refs.next.classList.remove('disabled')
      this.$refs.list.scrollTop = 0
    },
    // 关闭智能排货按钮
    closeSmartGoods () {
      this.smartGoodsDialog = false
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
 td {
  padding: 2px 0;
  border: none;
 }
 // &::before {
 //  height: 0;
 // }
}
.dis {
 color: #ffdada !important;
}
.goods {
 background:linear-gradient(135deg,#ff9743,#ff5e20)!important;
 border:none ;
}
::v-deep .el-dialog__footer {
  text-align: center !important;
}
::v-deep .el-dialog {
   border-radius: 10px;
.arrow-left {
   z-index: 99999;
   position: absolute;
   left:-5px;
   top: 300px;
   font-size: 60px;
  }
  .add_arrow-left {
   z-index: 99999;
   position: absolute;
   left:-5px;
   top: 270px;
   font-size: 60px;
  }
  .arrow-right {
   z-index: 99999;
   position: absolute;
   right: -5px;
   top: 300px;
   font-size: 60px;
  }
  .add_arrow-right {
   z-index: 99999;
   position: absolute;
   right: -5px;
   top: 270px;
   font-size: 60px;
  }
  .disabled {
   color: #d8dde3;
  }
 .next {
  transform: translateX(-840px)
 }
 .prev {
  transform: translateX(0)
 }
}

.not_selected {
  background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
 opacity: .3;
}
::v-deep .el-dialog__body {
    z-index: 99999;
    padding-top: 0;
  }
  .body {
    padding: 20px 20px 30px;
    position: relative;
    color: #666;
    height: 480px;
    overflow: hidden;
      .channel-basic {
        background: #f3f6fb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        // width: 847px;
        height: 56px;
        .good_left {
          width: 65%;
          span {
            padding-left: 35px;
          }
        }
        .good_right {
          margin-right: 20px;
        }
      }
    .channel-dialog-wrapper {
      position: relative;
      width: 847px;
      overflow: hidden;
      min-height: 570px; // 你可以设置固定或者最大最小高度
      overflow: hidden;  // 隐藏超出部分
      overflow-y: scroll;// 设置纵向滚动效果，x为横向
      .lists {
        width: 865px !important;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        width: 1700px;
        height: 185px;
        margin: 0 auto;
        margin-bottom: 15px;
        position: relative;
        transition: 0.5s;

        .main {
          position: relative;
          margin: 0 8px;
          width: 150px;
          height: 180px;
          box-shadow: 0 0 5px;
          position: relative;
          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
          border-radius: 4px;
          text-align: center;
          margin-bottom: 15px;
          .code {
            position: absolute;
            top: 10px;
            left: 0;
            width: 43px;
            height: 23px;
            line-height: 23px;
            background: #829bed;
            border-radius: 0 10px 10px 0;
            font-size: 12px;
            color: #fff;
          }
          .sku {
            // background-color: red;
            height: 135px;
            padding-top: 16px;
            background-color: #f6f7fb;
            border-radius: 4px;
            img {
              display: inline-block;
              width: 84px;
              height: 78px;
              margin-bottom: 10px;
              object-fit: contain;
              object-fit: contain;
            }
            .name {
                padding: 2px 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
          }

        .list_footer {
          position: absolute;
          text-align: center;
          width: 100%;
          height: 45px;
          bottom: 0;
          left: 0;
          .del {
            color: #ff5a5a;
          }
          .add {
            color: #5f84ff;
          }
        }
        }
      }
    }
  }

  .smart_body {
    padding: 20px 20px 30px;
    position: relative;
    color: #666;
    height: 400px;
    overflow: hidden;
    .smart_channel-dialog-wrapper {
      .smart_tip {
        margin-bottom: 16px;
        padding-left: 15px;
      }
      .sku_input {
        margin-bottom: 40px;
        padding-left: 17px;
      }
      position: relative;
      width: 800px;
      overflow: hidden;
      height: 390px; // 你可以设置固定或者最大最小高度
      overflow: hidden;
      .smart_list {
        display: flex;
        flex-wrap: wrap;
        width: 760px;
        height: 185px;
        margin: 0 10px;
        margin-bottom: 15px;
        position: relative;
        transition: 0.5s;

        .smart_main {
          position: relative;
          margin: 0 8px;
          width: 134px;
          height: 134px;
          box-shadow: 0 0 5px;
          position: relative;
          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
          border-radius: 4px;
          text-align: center;
          margin-bottom: 15px;
          .smart_sku {
            // background-color: red;
            height: 135px;
            padding-top: 16px;
            background-color: #f6f7fb;
            border-radius: 4px;
            .pic {
              display: inline-block;
              width: 84px;
              height: 78px;
              margin-bottom: 10px;
              object-fit: contain;
              object-fit: contain;
            }
            .name {
                padding: 2px 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
          }
          .selected {
              position: absolute;
              top: 0;
              left: 0;
              width: 36px !important;
              height: 36px !important;
              img {
                width: 100%;
                height: 100%;
              }
              }
        .smart_list_footer {
          position: absolute;
          text-align: center;
          width: 100%;
          height: 45px;
          bottom: 0;
          left: 0;
          .del {
            color: #ff5a5a;
          }
          .add {
            color: #5f84ff;
          }
        }
        }
      }
    }
  }
  // -------------------------------

*{
  list-style: none;
  box-sizing: border-box;
}
.container{
  padding: 20px;
  .search{
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  padding-top: 23px;
  .searchBtn{
    background-color: #5373e0;
  }
}
.content{
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .btns{
    margin-bottom: 20px;
   .left{
   background:linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border:none ;
   }
   .right{
    background-color: #fbf4f0;
    border:none ;
    color: #655b56;
   }
  }
  .el-pagination{
    position: relative;
   display: flex;
   justify-content: end;
   padding: 32px 16px;
   height: 32px;
   align-items: center;
   ::v-deep .btn-prev{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   ::v-deep .btn-next{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   .pagnation{
    position: absolute;
    left: 0;
    font-size: 16px!important;
    color: #dbdfe5!important;
    font-weight: normal;
   }

   .strategyDialog{
    ::v-deep .strategyForm{
      // padding:  0 20px;
      color: #666;
      font-weight: normal;
    }
     .footer {
       text-align: center !important;
      }
   }
   ::v-deep .editDialog-footer{
    display: flex;
    justify-content: center;
   }

  }
  .topMessage{
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 847px;
    height: 56px;
    background-color: #f3f6fb;
    color: #666;
    margin-bottom: 15px;
    .row{
      margin-left: 43px;
    }
    .col{
      margin-left: 55px;
    }
    .box{
      margin-left: 54px;
    }
    .sortPro{
      margin-left: 290px;
      .btn{
        background-color: #5f84ff;
      }
    }
  }

}
}
</style>
